import React, {useState} from "react";
import {
    Button,
    FormControlLabel,
    Grid, IconButton, InputAdornment,
    InputLabel,
    makeStyles,
    Paper,
    Radio,
    RadioGroup, Switch,
    TextField
} from "@material-ui/core";

import {Toolbar} from "../../shared/components";
import {VisibilityOffRounded, VisibilityRounded} from "@material-ui/icons";

const useStyle = makeStyles(theme => ({
    paper: {padding: theme.spacing(3, 2)}
}));

const AddMember = ({onClose, onConfirm, ...props}) => {
    const classes = useStyle();
    const [state, setState] = useState({role: '', approver: false, showPassword: false});

    return (
        <Grid container spacing={4}>
            <Toolbar
                title="Add Member"
                actions={<React.Fragment>
                    <Button color="primary" variant="contained" onClick={onConfirm}>Add</Button>
                    <Button variant="contained" onClick={onClose}>Cancel</Button>
                </React.Fragment>}
            />

            <Grid item xs={12}>
                <Paper elevation={2} className={classes.paper}>
                    <Grid container spacing={0} alignItems={"center"}>
                        <Grid item xs={6} container spacing={3} >
                            <Grid item xs={3}><InputLabel htmlFor="role">Role</InputLabel></Grid>
                            <Grid item xs={9}>
                                <RadioGroup
                                    id="role" name="role"
                                    value={state.role} row
                                    onChange={e => setState({...state, role: e.target.value})}
                                >
                                    <FormControlLabel value="role1" control={<Radio/>} label="Operator"/>
                                    <FormControlLabel value="role2" control={<Radio/>} label="Technician"/>
                                    <FormControlLabel value="role3" control={<Radio/>} label="Employee"/>
                                </RadioGroup>
                            </Grid>

                            <Grid item xs={3}><InputLabel htmlFor="name">Name</InputLabel></Grid>
                            <Grid item xs={9}>
                                <TextField
                                    id="name"
                                    variant="outlined"
                                    fullWidth
                                    onChange={e => console.log('Fault')}
                                />
                            </Grid>

                            <Grid item xs={3}><InputLabel htmlFor="userId">User Id</InputLabel></Grid>
                            <Grid item xs={9}>
                                <TextField
                                    id="userId"
                                    variant="outlined"
                                    fullWidth
                                    onChange={e => console.log('Fault')}
                                />
                            </Grid>

                            <Grid item xs={3}><InputLabel htmlFor="password">Password</InputLabel></Grid>
                            <Grid item xs={9}>
                                <TextField
                                    id="password"
                                    variant="outlined"
                                    fullWidth
                                    type={state.showPassword ? 'text' : 'password'}
                                    InputProps={{
                                        endAdornment: (
                                            <InputAdornment position="end">
                                                <IconButton
                                                    edge="end"
                                                    onClick={() => setState({...state, showPassword: !state.showPassword})}
                                                    onMouseDown={e => e.preventDefault()}
                                                >
                                                    {state.showPassword ? <VisibilityOffRounded/> : <VisibilityRounded/>}
                                                </IconButton>
                                            </InputAdornment>
                                        )
                                    }}
                                    onChange={e => console.log('Password')}
                                />
                            </Grid>

                            <Grid item xs={3}><InputLabel htmlFor="notificationEmail">Notification Email</InputLabel></Grid>
                            <Grid item xs={9}>
                                <TextField
                                    id="notificationEmail"
                                    variant="outlined"
                                    fullWidth
                                    onChange={e => console.log('Email')}
                                />
                            </Grid>

                            <Grid item xs={3}><InputLabel htmlFor="mobile">Mobile</InputLabel></Grid>
                            <Grid item xs={9}>
                                <TextField
                                    id="mobile"
                                    variant="outlined"
                                    fullWidth
                                    onChange={e => console.log('mobile')}
                                />
                            </Grid>

                            <Grid item xs={3}><InputLabel htmlFor="approver">Make Approver</InputLabel></Grid>
                            <Grid item xs={9}>
                                <Switch
                                    id="approver"
                                    name="approver"
                                    checked={state.approver}
                                    onChange={() => setState({...state, approver: !state.approver})}
                                />
                            </Grid>
                        </Grid>
                    </Grid>
                </Paper>
            </Grid>
        </Grid>
    );
};

export default AddMember;
